<template>
  <div>
    <div class="navItemContainer" v-if="navInfo.currentCategory">
      <!--  轮播图-->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner,index) in navInfo.currentCategory.bannerList" :key="index">
          <img class="swipe_item" :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>

      <!--展示模块-->
      <div class="showModulesWrap">

        <div class="show_item" v-for="(cate,index) in navInfo.categoryItemList" :key="index">
          <p class="show_title">{{ cate.category.name }}</p>
          <p class="show_desc">{{ cate.category.frontDesc}}</p>

          <div class="goodsWrap">

            <lazy-component class="goods" v-for="(goods,index) in cate.itemList" :key="goods.id">
              <div class="goods" @click="$router.push(`/detail?skuId=${goods.id}`)">
                <div class="goods_img">
                  <img
                      :src="goods.listPicUrl"
                      alt="">
                  <div class="goods_desc">{{ goods.simpleDesc }}</div>
                  <div v-if="goods.listPromBanner" class="sale_desc">
                    <div  class="sale_desc_left">
                      <div>{{ goods.listPromBanner.promoTitle }}</div>
                      <div>{{ goods.listPromBanner.promoSubTitle }}</div>
                    </div>
                    <div class="sale_desc_right">{{ goods.listPromBanner.content }}</div>
                  </div>
                </div>
                <p class="goods_name">{{ goods.name }}</p>
                <div class="goods_price">
                  <p class="curr_price">￥{{ goods.retailPrice }}</p>
                  <p class="pre_price">￥{{ goods.counterPrice }}</p>
                </div>
                <div v-if="goods.itemTagList" class="des">
                  <p v-for="(item,index) in goods.itemTagList" :key="index">{{ item.name }}</p>
                </div>
              </div>
            </lazy-component>
          </div>

        </div>

      </div>
    </div>
    <div class="loading" v-else>
      <van-loading  size="24px" color="#0094ff" text-color="#0094ff" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: "NavItem",
  data() {
    return {
      categoryId: ''
    }
  },
  computed: {
    ...mapState({
      navInfo: state => state.home.navInfo,
    }),
  },

  methods: {
    // 点击导航 请求点击的nav展示的数据
    getCategoryList() {
      const categoryId = this.categoryId
      //每次进来先把上次的数据清空
      this.$store.commit('REMOVE_NAV_INFO')
      const time = +new Date()
      this.$store.dispatch('getNavInfo', {time, categoryId})
    }
  },
  watch: {
    $route: {
      handler(NewValue) {
        this.categoryId = +NewValue.params.categoryId
        // 拿取navInfo
        this.getCategoryList()
      },
      deep: true,
      immediate: true,
    }
  },
}
</script>

<style lang="less" scoped>
.loading{
  margin-top:100px ;
}
.navItemContainer {
  width: 375px;
  background-color: #EEEEEE;
  padding-bottom: 50px;
  //轮播图
  .my-swipe {
    height: 148px;
    width: 375px;
    overflow: hidden;

    .van-swipe-item {
      height: 148px;
      width: 375px;

      .swipe_item {
        height: 185px;
        width: 375px;
      }
    }

  }

  // 展示模块
  .showModulesWrap {
    margin-top: 10px;
    width: 375px;


    .show_item {
      width: 375px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      margin-top:10px ;
      background-color: #ffffff;

      .show_title {
        font-size: 16px;
        color: #333333;
        margin: 15px 0 8px 0;
      }

      .show_desc {
        font-size: 12px;
        color: #999999;
        margin-bottom: 15px;
      }

      .goodsWrap {
        width: 375px;
        //height: 500px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        //background-color: skyblue;
        padding-top: 10px;


        .goods {
          //background-color: pink;
          height: 308.5px;
          width: 172.5px;
          margin-bottom: 5px;

          .goods_img {
            position: relative;
            width: 172.5px;

            img {
              width: 172.5px;
              height: 172.5px;

            }

            .goods_desc {
              background: #f1ece2;
              color: #9f8a60;
              font-size: 12px;
              height: 24px;
              line-height: 24px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; /* * 多行文本溢出... */
              overflow: hidden;
            }
            .sale_desc{
              height: 24px;
              width: 100%;
              position: absolute;
              bottom: 0;
              display: flex;
              background-color: #ED6D2A;
              .sale_desc_left{
                flex: 1;
                display: flex;
                transform: translate(1px,-4px);
                height: 28px;
                flex-direction: column;
                font-size:12px;
                color:#ffffff;
                background-color: #ED6D2A;
                border-top-right-radius:10px ;
                div{
                  padding-left:2px;
                  line-height: 15px;
                  text-align: center;
                  font-weight: bold;
                }
              }
              .sale_desc_right{
                flex: 2;
                font-size:12px;
                color:#ffffff;
                background-color: #F38245;
                line-height: 24px;
                padding-left:4px;

              }
            }
          }

          .goods_name {
            font-size: 14px;
            margin-top: 8px;
            color: #333333;
          }

          .goods_price {
            margin-top: 5px;
            display: flex;
            align-items: center;

            .curr_price {
              color: #dd1a21;
              font-size: 16px;
            }

            .pre_price {
              color: #999999;
              font-size: 12px;
              text-decoration-line: line-through;
              margin-left: 4px;
            }
          }

          .des {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 5px;

            p {
              text-align: center;
              line-height: 15px;
              font-size: 12px;
              height: 15px;
              color: #dd1a21;
              background: hsla(0, 0%, 100%, .9);
              border: 1px solid #dd1a21;
              border-radius: 7.5px;
              padding: 0 2px;
            }
          }


        }


      }


    }


  }
}


</style>
